<template>
  <div class="app-container">
    <div class="detail">
      <div class="label">
        账户信息
      </div>
      <div class="info-wrap">
        <div class="user-info">
          <el-avatar :size="80" :src="user.avatar"></el-avatar>
          <div class="info">
            <p>Hi</p>
            <p>{{ user.name }}</p>
            <p>{{ user.phone }}</p>
          </div>
        </div>

        <div class="balance-info">
          当前余额（元）
          <el-popover
            placement="top-start"
            title=""
            width="200"
            trigger="hover"
            :content="'冻结余额：'+freezeBalance">
            <el-button slot="reference" type="text" class="balance" size="medium">{{ balance }}</el-button>
          </el-popover>
          <div class="">
            <el-button type="primary" size="mini" v-hasPermi="['withdrawal:withdrawalOrder:add']" @click="handleWithdrawal(null)">提现</el-button>
            <el-button size="mini" @click="handleBalanceRecord(null)">余额详情</el-button>
          </div>
        </div>
      </div>
    </div>
    <cooperative_tax v-if="organizationType === 2 || organizationType === 4" @balanceRecord="handleBalanceRecord"></cooperative_tax>
    <Tax v-if="organizationType === 3" @balanceRecord="handleBalanceRecord"></Tax>
    <Plaform v-if="organizationType === 1" @balanceRecord="handleBalanceRecord"></Plaform>


    <el-drawer :wrapperClosable="false" :close-on-press-escape="false" title="余额变动记录" :visible.sync="balanceRecordVisible" size="60%">
      <balance-record  :taxOrganizationId="balanceDetail.taxOrganizationId" ></balance-record>
    </el-drawer>

    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" title="提现" :visible.sync="withdrawalVisible" size="500px" destroy-on-close>
      <withdrawal @handleCancel="handleCancel();"></withdrawal>
    </el-dialog>
  </div>
</template>
<script>
import store from "@/store";
import Tax from "@/views/finance/finance/profile/tax.vue";
import { getBalance } from "@/api/transfer/productBalance";
import { separateSumIsInvoicing } from "@/api/transfer/separate";
import Plaform from "@/views/finance/finance/profile/platform.vue";
import BalanceRecord from "@/views/transfer/balanceRecord/index.vue";
import Withdrawal from "@/views/finance/finance/profile/withdrawal.vue";
import {sumAccountBalance} from "@/api/transfer/transferAccountMerchantBalance";
import Cooperative_tax from "@/views/finance/finance/profile/cooperative_tax.vue";

export default {
  name:"finance",
  components: {Plaform, Withdrawal, BalanceRecord, Cooperative_tax,Tax},
  data(){
    return {
      user: {
        name: store.getters.name,
        avatar: store.getters.avatar,
      },
      balance: 0,
      freezeBalance:0,
      balanceDetail:{
        taxOrganizationId:null
      },
      withdrawalDetail:{
        taxOrganizationId:null
      },
      withdrawalVisible:false,
      balanceRecordVisible:false,
      organizationType: store.getters.organizationType,
    }
  },
  created() {
    const cachedData = JSON.parse(localStorage.getItem('domainData') || '{}');
    if (cachedData) {
      this.user.avatar = `${process.env.VUE_APP_BASE_API}${cachedData.logo}`

    }
    this.handleBalance()
  },
  methods:{
    handleBalanceRecord(taxOrganizationId){
      this.balanceDetail.taxOrganizationId = taxOrganizationId
      this.balanceRecordVisible = true
    },
    handleWithdrawal(val){
      this.withdrawalDetail.taxOrganizationId = val
      this.withdrawalVisible = true
    },
    handleBalance(){
      if (this.organizationType === 4){
        sumAccountBalance({organizationId:store.getters.organizationId}).then(res=>{
          this.balance = res.data?res.data:0
        })
      }else {
        getBalance({}).then(res=>{
          this.balance = res.data?res.data:0
        })

        let params = {
          params:{
            isInvoicingIn: [0,2]
          },
        }

        separateSumIsInvoicing(params).then(res=>{
          this.freezeBalance = res.data?res.data:0
        })
      }
    },
    handleCancel(){
      this.withdrawalVisible = false;
      this.withdrawalDetail.taxOrganizationId = null
      this.handleBalance();
    }
  }
}
</script>

<style scoped lang="scss">
.detail {
  margin-bottom: 20px;
  .label {
    margin-bottom: 20px;
    padding-left: 13px;
    height: 14px;
    line-height: 14px;
    font-size: 14px;
    border-left: 4px solid #01bfcb;
    color: #878a9d;
    font-weight: 700;
  }

  .info-wrap {
    width: 50%;
    display: flex;
    color: #303133;
    font-size: 14px;
    justify-content: space-between;

    .user-info {
      gap: 15px;
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .balance-info {
      width: 50%;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-evenly;
      border-left: 1px solid #efefef;

      .balance {
        font-size: 30px;
      }
      .warning{
        color: #E6A23C
      }
    }
  }

  .tsl {
    margin-top: 20px;
  }
}
</style>
